<template>
    <Header></Header>
    <!--  {{course_list}}-->
    <div v-if="activeCourse">
        <Banner :is-index="true" :learnContent="learnContent" :course_info="course_info" @changeCourse="changeCourse" :bannerList="banner_list"
                :courseList="course_list">
            <template #search>
                <el-button plain type="primary" @click="toSearch" :icon="Search">搜索</el-button>
            </template>
        </Banner>
        <div class="my-course">
            <div class="content">
                <courseModelList :activeCourse="active_param"></courseModelList>
                <liveBroadcastModelList :filterStates="filterStates" :activeCourseName="activeCourseName" :activeCourse="active_param"></liveBroadcastModelList>
            </div>
        </div>
        <div class="bottom-content">
            <infoMation :activeCourse="active_param"></infoMation>
        </div>
    </div>
    <IndexFooter></IndexFooter>
</template>

<script>

    import {Search} from '@element-plus/icons-vue'
    import infoMation from "@/components/infoMation";
    import IndexFooter from "@/components/IndexFooter";
    import courseModelList from "@/components/courseModelList";
    import liveBroadcastModelList from "@/components/liveBroadcastModelList";
    import Banner from "@/components/Banner";
    import Header from "@/components/Header";
    import {reactive, ref, onBeforeUnmount, onMounted} from "vue";
    import {bannerList, courseList, userInfo, recentLatelyLearn, courseInfo, liveReserve} from "../../api/api";
    import {useRouter} from "vue-router";

    export default {
        name: "index",
        setup() {
            let defaultStates = ['1','0','2'];
            let filterStates = ref([]);
            let router = useRouter();

            //筛选出有数据的直播列表
            let filterStateFun = () =>{
              filterStates.value = [];
              let promise = defaultStates.map((item,index) =>{
                console.log({state: item, courseID: localStorage.getItem('activeCourse')})
                return liveReserve({state: item, courseID: localStorage.getItem('activeCourse')})
              })
                Promise.all(promise).then((allData) => {
                  let arr = []
                  for (let item of allData){
                    if(item.data.rows.length){
                      console.log(item)
                        arr.push(allData.indexOf(item))
                    }
                  }
                  console.log('arr',arr)
                  arr.forEach(item =>{
                    filterStates.value.push(defaultStates[item])
                  })
                })
              console.log('filterStates',filterStates)
              // for (let item of defaultStates){
              //   liveReserve({state: item, courseID: localStorage.getItem('activeCourse')}).then(res => {
              //     if(res.data.rows.length){
              //       filterStates.value.push(item)
              //     }
              //   })
              // }
            }

            //当前课程全局
            let activeCourse = ref(null)
            let activeCourseName = ref('')

            //banner图集合
            let banner_list = ref([])
            let getBannerList = () => {
                bannerList({id: localStorage.getItem('activeCourse'), type: 1}).then(res => {
                    console.log('轮播图列表', res)
                    banner_list.value = res.data
                })
            }
            let course_info = ref({})
            let getCourseInfo = (course_id) =>{
                courseInfo({courseID:course_id}).then(res =>{
                    console.log('课程信息',res.data)
                    course_info.value = res.data;
                })
            }

            //最近在学内容
            let learnContent = ref({});
            let getRecentLatelyLearn = () =>{
                recentLatelyLearn({courseID:localStorage.getItem('activeCourse')}).then(res =>{
                    console.log('最近在学内容',res);
                    learnContent.value = res.data
                })
            }
            getRecentLatelyLearn();

            //课程列表
            let course_list = reactive([]);
            const getCourseList = () => {
                courseList().then(res => {
                    console.log('课程列表', res)
                    course_list.push(...res.data)
                    activeCourse.value = window.localStorage.getItem('activeCourse') ? window.localStorage.getItem('activeCourse') : res.data[0].courseID
                    activeCourseName.value = window.localStorage.getItem('activeCourseName') ? window.localStorage.getItem('activeCourseName') : res.data[0].name
                    window.localStorage.setItem('activeCourse', String(activeCourse.value));
                    window.localStorage.setItem('activeCourseName', String(activeCourseName.value));
                    getBannerList();
                    getCourseInfo(Number(activeCourse.value))
                    filterStateFun();
                })
            }
            getCourseList();

            let active_param = ref('')
            let changeCourse = (activeCourse) => {
                active_param.value = activeCourse.courseId
                let activeCourseName = course_list.filter(item => item.courseID == activeCourse.courseId)[0].name;
                console.log('activeCourseName',activeCourseName)
                window.localStorage.setItem('activeCourseName', String(activeCourseName));
                getRecentLatelyLearn();
                getBannerList();
                getCourseInfo(Number(localStorage.getItem('activeCourse')));
              filterStateFun();
            }

            let toSearch = () =>{
                router.push({name:'Search',params:{activeName:'course'}})
            }

            return {
              filterStates,
                course_info,
                toSearch,
                Search,
                learnContent,
                activeCourseName,
                activeCourse,
                active_param,
                changeCourse,
                banner_list,
                course_list,
                getCourseList
            }
        },
        components: {
            Header,
            Banner,
            courseModelList,
            liveBroadcastModelList,
            IndexFooter,
            infoMation
        }
    }
</script>

<style scoped>
    .my-course {
        width: 100%;
        background-color: rgba(247, 250, 255, 1);
        padding-bottom: 20px;
    }

    .content, .bottom-content {
        margin: 0 auto;
        width: 1200px;
    }

    .bottom-content {
        background-color: white;
    }
</style>
